<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCloud AI 智能体</title>
    <!-- 基础样式 -->
    <link rel="stylesheet" href="styles/base.css">
    <link rel="stylesheet" href="styles/sidebar.css">
    <link rel="stylesheet" href="styles/main-content.css">
    <link rel="stylesheet" href="styles/tasks.css">
    <link rel="stylesheet" href="styles/history.css">
    <link rel="stylesheet" href="styles/animations.css">
    <link rel="stylesheet" href="styles/pages.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="brand">
                <div class="brand-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <h1>CCloud AI</h1>
            </div>

            <nav class="nav-menu">
                <button class="nav-item active" data-tab="home">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </button>
                <button class="nav-item" data-tab="tasks">
                    <i class="fas fa-tasks"></i>
                    <span>任务执行</span>
                </button>
                <button class="nav-item" data-tab="history">
                    <i class="fas fa-history"></i>
                    <span>历史记录</span>
                </button>
                <button class="nav-item" data-tab="setup">
                    <i class="fas fa-cog"></i>
                    <span>设置 Claude Code</span>
                </button>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="main-content" id="main-content">
            <!-- 页面内容将通过 PageLoader 动态加载 -->
            <div class="loading-placeholder">
                <div class="loading-spinner">
                    <div class="spinner"></div>
                    <p>正在加载页面...</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 加载动画 -->
    <div id="loading" class="loading-overlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>正在处理中...</p>
        </div>
    </div>

    <!-- 共享工具类 -->
    <script src="scripts/shared/event-manager.js"></script>

    <!-- 页面加载器 -->
    <script src="components/page-loader.js"></script>

    <!-- 核心模块 -->
    <script src="scripts/core/api-service.js"></script>
    <script src="scripts/core/app-state.js"></script>
    <script src="scripts/core/global-event-handlers.js"></script>
    <script src="scripts/core/ui-utils.js"></script>
    <script src="scripts/core/app.js"></script>

    <!-- 页面处理器 -->
    <script src="scripts/pages/home-handler.js"></script>
    <script src="scripts/pages/setup-handler.js"></script>
    <script src="scripts/pages/tasks-handler.js"></script>
    <script src="scripts/pages/history-handler.js"></script>

    <!-- 全局函数 -->
    <script src="scripts/global-functions.js"></script>

    <!-- 主应用脚本 -->
    <script src="scripts/main.js"></script>
</body>

</html>